<div class="">
  <form novalidate [formGroup]="form">
    <!-- 使用方式1：未设置 CounterComponent 组件初始值 -->
      <app-counter formControlName="counter" counterRangeMin="5" counterRangeMax="10"></app-counter>
      <button class="btn btn-default">Submit</button>
  </form>
  <p *ngIf="!form.valid" class="error">Conter is invalid</p>
  <!-- <pre>{{ f.value | json }}</pre> -->
  <pre>{{ form.get('counter').errors | json }}</pre>
</div>

<!-- 上面示例代码中，form.value 用于获取表单中的值，json 是 Angular 内置管道,用于执行对象序列化操作 (内部实现 - JSON.stringify(value, null, 2))。
  若想了解 Angular 管道详细信息，请参考 - Angular 2 Pipe。https://segmentfault.com/a/1190000008646187
-->
